<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>

<form>
    <table>
        <tr>
            <td>服务</td>
            <td id="clientId"></td>
        </tr>
        <tr>
            <td>信息</td>
            <td><input id="message" name="message" type="text"/></td>
        </tr>
        <tr>
            <td>
                <button type="button" id="submit">发送</button>
            </td>
        </tr>
    </table>
</form>
<ul id="messageInformation">

</ul>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

    var clientId
    if (clientId == null || clientId == 'undefined') {
        clientId = new Date().getMilliseconds()
    }
    $("#clientId").text(clientId + "您好");
    var toId;
    $("#submit").click(function () {
        $.ajax({
                url: '/push',
                method: 'post',
                beforeSend: function () {
                    var old = $("#messageInformation").html()
                    old += "<ul>" + "我：" + $("#message").val() + "</ul>"
                    $("#messageInformation").html(old);
                },
                data: {
                    "formId": clientId,
                    "message": $("#message").val(),
                    "type": "message_server",
                    "toId": toId
                }
            }
        )
    })
</script>
<script>
    var socket;

    var basePath = "http://localhost:9000/"
    console.log(basePath)
    $(document).ready(function () {
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持")
        } else {
            socket = new WebSocket((basePath + "opinion/message/" + clientId + "/message_server").replace("http", "ws"));
            //打开事件
            socket.onopen = function (result) {
                console.log(result);
            }

            // 获得信息
            socket.onmessage = function (result) {
                var message = JSON.parse(result.data)
                console.log(message)
                if (toId == null || toId == 'undefined' || message.formId != toId) {
                    toId = message.formId
                }
                console.log(toId)
                console.log(message.message)
                var old = $("#messageInformation").html()
                old += "<ul>" + "客户" + toId + "：" + message.message + "</ul>"
                $("#messageInformation").html(old);
            }


        }

    })
</script>
</body>
</html>
